<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>select</title>
	 <link rel="stylesheet" type="text/css" href="./css/fonticon/iconfont.css">
	<style type="text/css">
		*{
			margin:0px;
			padding:0px;
		}

		html,body{
			width:100%;
			height: 100%;
			font-size: 14px;
			font-family: "黑体";
			overflow:hidden; 
		}

		.targer-select *{
			box-sizing: border-box;
		}

		.targer-select{
			position: relative;
			width:200px;
			min-height: 30px;
			margin:60px auto;
			background-color: #EEE;
			user-select:none;
		}

		.palceholder{
			height: 30px;
			line-height: 30px;
			border:1px solid #ccd5db;
			border-radius: 3px;
			text-align: center;
			background-color: #FFF;
			cursor: pointer;
		}
		
		.targer-select .icon-unfold1:before{
            position: absolute;
            right: 5px;
            font-size: 18px;
        }
		.selectOption{
			display: none;
			position: relative;
			width: 100%;
			margin-top:1px;
			border:1px solid #ccd5db;
			border-radius: 3px;
			
		}

		.optionItem{
			position: relative;
			width: 100%;
			height: 25px;
			line-height: 25px;
			border-bottom: 1px solid #CCC;
		}
		


		.checkBox{
			position: absolute;
		    left: 5px;
		    top: 5px;
		    width: 15px;
		    height: 15px;
		    border: 2px solid lightgreen;
		    color:#FFF;
		    background-color: lightgreen;
		}
		.optionItem .icon-right:before{
		    position: absolute;
		    top: -7px;
		    left: -4px;
		    font-size: 18px;
		    font-weight: bold;
		}
		.checkBox .check{
			position: absolute;
			width:15px;
			height: 15px;
			opacity: 0;
			top:0px;
			left:0px;
			z-index: 2;
			cursor: pointer;
		}

		.optionText{
			position: absolute;
			top:0px;
			left:25px;
			width: 160px;
			padding:0px 5px;
		}
	.optionItem:hover{
			background: #59c7f9;
			color:#fff;
		}
	</style>
</head>
<body>
	<div class="targer-select">
		<div class="palceholder iconfont icon-unfold1">
			选择目标元素
		</div>
		<div class="selectOption">
			<div class="optionItem">
				<div class="checkBox iconfont icon-right" >
					<input type="checkBox" class="check">
				</div>
				<div class="optionText">文本2</div>
			</div>

			<div class="optionItem">
				<div class="checkBox iconfont icon-right" >
					<input type="checkBox" class="check">
				</div>
				<div class="optionText">文本2</div>
			</div>

			<div class="optionItem">
				<div class="checkBox iconfont icon-right" >
					<input type="checkBox" class="check">
				</div>
				<div class="optionText">文本2</div>
			</div>

			<div class="optionItem">
				<div class="checkBox iconfont icon-right" >
					<input type="checkBox" class="check">
				</div>
				<div class="optionText">文本2</div>
			</div>
			<div class="optionItem">
				<div class="checkBox iconfont icon-right" >
					<input type="checkBox" class="check">
				</div>
				<div class="optionText">文本2</div>
			</div>
			<div class="optionItem">
				<div class="checkBox iconfont icon-right" >
					<input type="checkBox" class="check">
				</div>
				<div class="optionText">文本2</div>
			</div>
			<div class="optionItem">
				<div class="checkBox iconfont icon-right" >
					<input type="checkBox" class="check">
				</div>
				<div class="optionText">文本2</div>
			</div>
		</div>
	</div>

	
</body>
<script type="text/javascript" src="./js/jquery-2.2.0.js"></script>
<script type="text/javascript">
	$(function(){
		$(".palceholder").click(function(){
			$(this).next().show();
		});

		$(".targer-select").hover(function(){},function(){
			$(".selectOption").hide();
		});
	})
</script>
</html>